<template>
    <div class="section-wrap breakInput"
         style="height:100%;">
        <vue-better-scroll class="wrapper"
                           ref="scrollqq"
                           :scrollbar="scrollbarObj"
                           :pullDownRefresh="pullDownRefreshObj"
                           :pullUpLoad="pullUpLoadObj"
                           :startY="parseInt(startY)"
                           @pullingUp="onPullingUp">
            <div class="form-section">
                <tab active-color='#2269ff'>
                    <tab-item selected
                              @on-item-click="$router.push('breakInput')">
                        <i>违章登记</i>
                    </tab-item>
                    <tab-item @on-item-click="$router.push('breakList')">违章列表</tab-item>
                    <tab-item @on-item-click="$router.push('breakStatus')">违章统计</tab-item>
                </tab>
                <!-- <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>单位名称</label>
                    </div>
                    <group>
                        <div>
                            <div class="right-select"
                                 @click="selectType">
                                {{$store.state.checkcompany.deptName?$store.state.checkcompany.deptName:"请选择"}}
                                <i class="iconfont icon-jinru rightmsg"></i>
                            </div>
                        </div>
                    </group>
                </div> -->
                <!-- <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>违章类型</label>
                    </div>
                    <group>
                        <div>
                            <popup-picker :data="list1"
                                          v-model="brokenRuleType"
                                          placeholder="请选择"
                                          @on-show="selectRule"></popup-picker>
                        </div>
                    </group>
                </div> -->
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>开始时间</label>
                    </div>
                    <group>
                        <div>
                            <datetime format="YYYY-MM-DD"
                                      v-model="formData.startTime"></datetime>
                        </div>
                    </group>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>结束时间</label>
                    </div>
                    <group>
                        <div>
                            <datetime format="YYYY-MM-DD"
                                      v-model="formData.endTime"></datetime>
                        </div>
                    </group>
                </div>
                <div class="search-div">
                    <div class="search-btn"
                         @click="submit">查询</div>
                    <!-- <div class="search-btn"
                         @click="edit">登记</div> -->
                </div>
                <div class="cut-off-rule"></div>
                <no-data v-if="acceptList.length==0 && flag"></no-data>
                <dl ref="list"
                    v-if="acceptList.length>0"
                    @click="$router.push({path:'breakInfo',query:{id:item.Id}})"
                    v-for="(item,index) in acceptList"
                    :key="index">
                    <dt>{{item.Description}}</dt>
                    <dd>{{item.BrokenRuleType}}
                        <span>{{item.HappendDate?item.HappendDate.split(' ')[0]:''}}</span>
                    </dd>
                    <img :src="item.Images[0]"
                         v-if="item.Images && item.Images.length > 0" />
                    <img src="@/assets/nopic.png"
                         v-else/>
                </dl>
            </div>
        </vue-better-scroll>
        <myMenu :addPath="addPath"></myMenu>
    </div>

</template>

<script>
import { Tab, TabItem, PopupRadio, Datetime } from 'vux'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
import { breakList2, breakType } from '@/api/api'
import noData from '@/commonComponents/noData/noData.vue'

export default {
    name: 'App',
    data () {
        return {
            addPath: '/breakEdit',
            formData: {},
            list1: [],
            brokenRuleType: [],
            brokenRuleData: [],
            flag: false,
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            scrollToX: 0,
            scrollToY: 0,
            scrollToTime: 700,
            acceptList: [], // 列表数据
            listCount: 0, // 当前页列表条数
            listAllCount: 0, // 列表总数
            param: {
                allowPaging: true,
                data: {
                    happendDateEnd: '',
                    happendDateStart: '',
                    recordPersonId: '',
                    deptid: '',
                    BrokenRuleType: ''
                },
                pageIndex: 0,
                pageSize: 20
            }
        }
    },
    components: {
        VueBetterScroll,
        Tab,
        TabItem,
        noData,
        PopupRadio,
        Datetime,
        myMenu
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.formData.userID = userInfo.userid
        this.formData.departID = userInfo.deptid
        this.formData.startTime = this.getdatestr()
        this.formData.endTime = this.getdatenew()
        this.getData()
        if (this.$store.state.checkcompany.sourceType !== 'breakInput') {
            this.$store.state.checkcompany = {}
        }
        if (localStorage.getItem('listSearch')) {
            this.formData = JSON.parse(localStorage.getItem('listSearch'))
            localStorage.removeItem('listSearch')
            this.formData.departID = this.$store.state.checkcompany.deptId
            this.formData.departName = this.$store.state.checkcompany.deptName
            this.brokenRuleType = this.formData.brokenRuleType
            this.brokenRuleData = this.formData.brokenRuleData
            this.formData.brokenRuleType = null
        }
    },
    methods: {
        getData () {
            this.param.data.happendDateStart = this.formData.startTime
            this.param.data.happendDateEnd = this.formData.endTime
            this.param.data.recordPersonId = this.formData.userID
            this.param.data.BrokenRuleType = this.formData.brokenRuleType
            this.param.data.deptid = this.formData.departID
            breakList2(this.param).then((res) => {
                if (res.code === 0) {
                    this.acceptList = res.data
                    this.listCount = this.acceptList.length
                    this.listAllCount = res.count
                }
            }).catch(() => {
                console.log('error')
            }).finally(() => {
                this.$vux.loading.hide()
                this.flag = true
            })
        },
        selectType () {
            this.formData.brokenRuleType = this.brokenRuleType
            this.formData.brokenRuleData = this.brokenRuleData
            localStorage.setItem('listSearch', JSON.stringify(this.formData))
            this.$router.push({ path: '/addCompany3', query: { sourceType: 'breakInput' } })
        },
        getdatestr () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            var currentdate = year + seperator1 + month + seperator1 + '01'
            return currentdate
        },
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        },
        selectRule () {
            this.list1 = []
            this.brokenRuleType = []
            let param = {
                allowPaging: true,
                data: {},
                pageIndex: 0,
                pageSize: 20
            }
            breakType(param).then((res) => {
                let data = []
                this.brokenRuleData = res.data
                this.brokenRuleData && this.brokenRuleData.forEach(rule => {
                    data.push(rule.TypeName)
                })
                this.list1.push(data)
            })
        },
        onPullingDown () {
            console.log('xl')
        },
        onPullingUp () {
            this.param.pageIndex++
            breakList2(this.param).then((res) => {
                if (res.code === 0) {
                    this.acceptList = this.acceptList.concat(res.data)
                    this.listCount = this.acceptList.length
                    this.listAllCount = res.count
                    if (this.listCount < this.listAllCount) {
                        this.$refs[`scrollqq`].forceUpdate(true)
                    } else {
                        this.$refs[`scrollqq`].forceUpdate(false)
                    }
                }
            }).catch(() => {
                console.log('error')
            }).finally(() => {
                this.$vux.loading.hide()
                this.flag = true
            })
        },
        onClick () {
            this.param.data.name = this.name
            this.getData()
        },
        submit () {
            this.param.pageIndex = 0
            if (this.brokenRuleType) {
                this.formData.brokenRuleType = this.brokenRuleType[0]
            }
            this.getData()
        },
        edit () {
            this.$router.push({ path: '/breakEdit' })
        }
    }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.form-section {
    // position: fixed;
    // top: 0px;
    // width: 100%;
    // height: 100%;
    // left: 0;
    // overflow: scroll;
    // bottom: 100px;
    .vux-tab-selected {
        i {
            font-size: 15px;
            color: #2269ff;
            font-weight: bold;
        }
    }
    .search-div {
        width: 100%;
        text-align: center;
        display: flex;
    }
    .search-btn {
        width: 200px;
        line-height: 40px;
        border-radius: 20px;
        margin: 23px auto;
        /*text-align: center;*/
        color: #fff;
        background: #2269ff;
    }
    .search-btn:hover {
        opacity: 8;
    }
    dl {
        height: 105px;
        border-bottom: 1px solid #f0f0f2;
        font-size: 12px;
        margin-left: 20px;
        overflow: hidden;
        background: url(../../../../static/images/index/more3.png) no-repeat
            right 10px center;
        background-size: 9px 15px;
        position: relative;
        dt {
            width: 221px;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            color: #333;
            margin: 15px 0 13px 0;
            font-size: 14px;
        }
        dd {
            width: 221px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: break-word;
            color: #999;
            margin: 15px 0 13px 0;
            font-size: 14px;
            span {
                width: 120px;
                font-weight: 100;
                float: right;
                color: #999;
                font-size: 14px;
            }
        }
        img {
            position: absolute;
            width: 100px;
            height: 75px;
            border-radius: 10px;
            top: 15px;
            right: 30px;
        }
    }
}

.right-select {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    padding-right: 0px;
    height: 20px;
    overflow: hidden;
    width: 180px;
    position: relative;
    line-height: 20px;
    margin-right: -5px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-jinru {
    margin-right: 0px;
    color: #c8c8cd;
}
</style>
<style>
.breakInput .pullup-wrapper {
    position: relative;
    z-index: 1;
}
</style>
